<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 自定义左侧 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 自定义右侧 -->
      <template #right>
        <van-button
          class="searchBtn"
          icon="search"
          round
          type="primary"
          to="/search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <articleList :channel_id="item.id" />
      </van-tab>

      <div class="icon-box" @click="celBtn">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>
    <van-action-sheet v-model="celShow" title="频道管理">
      <!-- <channelList
        :ownList="ownList"
        :allChannel="allList"
        @dellist="getlist"
        :value="active"
        @input="active = $event"
        @close="celShow = false"
      />   -->

      <!-- 
    v-model 本质上就是个语法糖,它相当于帮你生成了
    @input="数据=$event"
    :value"数据"
    例如:v-model="active" 他相当于 :value="active" 和 @input="active = $event"
    自定义名字必须是value和input
   -->
      <channelList
        :ownList="ownList"
        :allChannel="allList"
        v-model="active"
        @close="celShow = false"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import articleList from "./articleList.vue";
import channelList from "./channelList";
import { ownChannelAPI, channelAllAPI } from "@/api";
import { getChannel } from "@/utils/channel.js";
export default {
  name: "home",
  components: {
    articleList,
    channelList,
  },
  data() {
    return {
      active: 0,
      // 保存自己频道的数组
      ownList: [],
      celShow: false,
      allList: [],
    };
  },

  methods: {
    celBtn() {
      this.celShow = true;
    },
    async getlist() {
      // 判断有没有登录
      if (this.$store.state.tokenObj.token) {
        // 获取自己的频道
        let res1 = await ownChannelAPI();
        // console.log(res1);
        this.ownList = res1.data.data.channels;
      } else {
        // 如果没有登录先获得本地存储
        let res1 = getChannel();

        // 再做判断,本地存储有没有数据
        // true 就是有数据
        if (res1) {
          this.ownList = res1;
        } else {
          //若果没数据就发请求获取默认频道
          let res1 = await ownChannelAPI();
          // console.log(res1);
          this.ownList = res1.data.data.channels;
        }
      }
      // 上面的代码优化思想：经过分析发现，要么是我有token就要发请求，要么就是本地存储没数据也要发请求
      // 所以，完全可以把他们放到一起，用||连接
      // let local = getChannels();
      // if (this.$store.state.tokenObj.token || !local) {
      //   let res1 = await ownChannelsAPI();
      //   this.ownList = res1.data.data.channels;
      // } else {

      //   // 如果没登录并且本地存储有值，都是从本地存储取的
      //   this.ownList = local;
      // }
    },

    async allChannel() {
      let res2 = await channelAllAPI();
      console.log(res2);

      this.allList = res2.data.data.channels;
    },
  },
  created() {
    this.getlist();
    this.allChannel();
  },
};
</script>

<style lang="less" scoped>
.home {
  .logo {
    width: 120px;
    height: 100%;
    // contain按比例缩放,会缩小到盒子里面
    background: url(@/assets/logo.png) no-repeat center / contain;
  }

  .searchBtn {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    .van-icon {
      color: #fff;
    }
  }

  // 频道栏布局
  .van-tabs {
    position: relative;

    ::v-deep .van-tabs__wrap {
      width: 345px;
    }

    .icon-box {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;

      .van-icon-wap-nav {
        font-size: 24px;
      }
    }
  }
  .van-action-sheet {
    height: 455px;
  }
}
</style>